import { Tooltip, Tag } from 'antd';
import type { Settings as ProSettings } from '@ant-design/pro-layout';
import React from 'react';
import type { ConnectProps } from 'umi';
import { connect, Link } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { CurrentUser } from '@/models/user';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import NoticeIconView from './NoticeIconView';
import { QuestionCircleOutlined } from '@ant-design/icons';

export type GlobalHeaderRightProps = {
  currentUser?: CurrentUser;
  theme?: ProSettings['navTheme'] | 'realDark';
  showNotice?: boolean;
} & Partial<ConnectProps> &
  Partial<ProSettings>;

const ENVTagColor = {
  dev: 'orange',
  test: 'green',
  pre: '#87d068',
};

const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
  const { theme, layout, showNotice, currentUser } = props;
  let className = styles.right;
  let type = '';

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  if (currentUser && currentUser.system) {
    if (currentUser.system == 'cm' || currentUser.system == 'gs') {
      type = 'sgdw'
    } else if (currentUser.system == 'bk') {
      type = 'jryh'
    } else if (currentUser.system == 'ls') {
      type = 'ldjc'
    }
  }

  return (
    <div className={className}>
      <Tooltip title="帮助文档">
        <Link style={{ padding: '0 8px'}} to={`/docs/${type}`} target="_blank"><QuestionCircleOutlined /></Link>
      </Tooltip>
      {showNotice && <NoticeIconView />}
      <Avatar />
      {REACT_APP_ENV && (
        <span>
          <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
        </span>
      )}
    </div>
  );
};

export default connect(({ user, settings }: ConnectState) => ({
  currentUser: user.currentUser,
  theme: settings.navTheme,
  layout: settings.layout,
}))(GlobalHeaderRight);
